<!DOCTYPE html>
<html lang="en">
    <title>按钮</title>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>

		<!-- 引入样式文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css"> -->
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script> -->
		<link rel="stylesheet" href="../css/index.css">
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="../js/vue.js"></script>
		<script src="../js/vant.min.js"></script>

	</head>

	<body>
		<div id="app">
			<div>
				<div style="color: #C8C9CC;30px;line-height: 30px;">基础用法</div>
				<van-nav-bar
				  title="标题"
				  left-text="返回"
				  right-text="按钮"
				  left-arrow
				  @click-left="onClickLeft"
				  @click-right="onClickRight"
				></van-nav-bar>
				
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">使用插槽</div>
				<van-nav-bar title="标题" left-text="返回" left-arrow>
				  <template #right>
				    <van-icon name="search" size="18" />
				  </template>
				</van-nav-bar>
				
				
			</div>
		</div>
		<script>
			//import { Toast } from 'vant';
			// 在 #app 标签下渲染一个按钮组件
			new Vue({
				el: '#app',
				
				data: {
				
				},
				
				methods: {
				    onClickLeft() {
						//直接跳转
						this.$router.push('../vant/vant-button.html');
				        //vant.Toast('返回');
				    },
				    onClickRight() {
				        vant.Toast('按钮');
				    },
				},
				
				created() {
				
				},
				//template: '<van-button type="danger">默认按钮</van-button>'
				//template: `<van-cell title="单元格" value="内容" size="large" />`
			});
			// 调用函数组件，弹出一个 Toast
			//vant.Toast('提示');
		</script>
	</body>
</html>
